<template>
  <div>
    <h2>App</h2>
    <button @click="comName='MyLeft'">展示left</button>
    <button @click="comName='MyRight'">展示right</button>
    <!-- 给动态组件套一层 keep-alive,可以保持组件不被销毁，从而可以保持组件的状态--> 
     <!-- include="MyLeft,MyRight” 表示指定哪些组件需要保持状态;不指定的就不会被缓存了 -->
    <!-- exclude="MyLeft,MyRight" 表示指定哪些组件不需要保持状态;不指定的就会被缓存 -->
    <!-- 动态组件，使用 component 标签，关键是 :is 属性，属性值是组件名 --> 
    <keep-alive include="MyRight">
       <component :is="comName"></component>
    </keep-alive>
   
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'
export default {
components:{
  MyLeft,
  MyRight
},
data (){
  return {
    comName:'MyLeft'
  }
}
}
</script>

<style>

</style>